<template>
    <view class="main">
        <view class="tem-image" @click="show = true" v-if="!urlLink || !formData.licensePlateNumber">
            <image src="/static/image/xszsb2.png" mode="widthFix" />
            <view class="tip">{{ isUp ? '重新上传' : '上传行驶证 自动识别数据' }}</view>
        </view>
        <view class="tem-image" @click="show = true" v-else>
            <image :src="urlLink" mode="widthFix" />
            <view class="mask"> <!-- 单独遮罩层 -->
                <view class="tips"> <!-- 内容层 -->
                    <image class="tip-icon" src="/src/static/icon/xj.jpg" mode="scaleToFill" />
                    <view class="tip-text">重新上传</view>
                </view>
            </view>
        </view>
        <view class="form">
            <view class="form-item" v-for="item in formList" :key="item.key">
                <view class="left">
                    <view class="req" v-if="item.required">*</view>
                    <view class="label">{{ item.label }}</view>
                </view>
                <view class="input">
                    <input :type="item.type" disabled :placeholder="item.placeholder" v-model="formData[item.key]" />
                </view>
            </view>
        </view>
        <view class="footer">
            <button class="login-btn" :class="{ active: canSubmit }" :disabled="!canSubmit" @click="handleSubmit">
                提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交
            </button>
        </view>
    </view>
    <XszUpload :show="show" @close="close" @upload="upload" />
</template>

<script setup>
import { ref, computed } from 'vue'
import XszUpload from '@/components/xszUpload/XszUpload.vue'
import { orc, postBindCar } from '@/api/apiList'
import { onLoad } from '@dcloudio/uni-app'



onLoad(() => {
    // sq()
})

const sq = () => {
    if (uni.getStorageSync('isDing') == 2) {
        uni.showModal({
            content: '检测到您没打开获取信息功能权限，是否去设置打开？',
            confirmText: "确认",
            cancelText: '取消',
            success: (res) => {
                if (res.confirm) {
                    uni.openSetting({
                        success: (res) => {
                            console.log(res);
                        }
                    })
                } else {
                    console.log('取消');
                }
            }
        })
    }
}

let show = ref(false)
const formData = ref({
    licensePlateNumber: '',
    model: '',
    vehicleType: '',
    vinCode: '',
})

let isUp = ref(false)
let urlLink = ref('')
const upload = async (res) => {
    formData.value = {}
    show.value = false
    isUp.value = true
    urlLink.value = res.url
    uni.showLoading({
        title: '识别中...',
        mask: true
    })
    let ocrRes = await orc({
        url: urlLink.value
    })
    if (ocrRes.code == 200) {
        formData.value = ocrRes.data
        // formData.value.model = formData.value.model.split('牌').join('-')
        uni.hideLoading()
        uni.showToast({
            title: '识别成功',
            icon: 'none',
        })
    } else {
        uni.hideLoading()
        uni.showToast({
            title: res.msg,
            icon: 'none',
        })
    }
}

const handleSubmit = async () => {
    uni.showLoading({
        title: '绑定中',
    })
    let res = await postBindCar({ ...formData.value, url: urlLink.value })
    if (res.code == 200) {
        uni.hideLoading()
        uni.showToast({
            title: '绑定成功',
            icon: 'none',
        })
        setTimeout(() => {
            uni.reLaunch({
                url: '/pages/mine/mineIndex'
            })
        }, 1000)

    } else {
        uni.hideLoading()
        uni.showToast({
            title: res.msg,
            icon: 'none',
        })
    }
}

const close = (type) => {
    isUp.value = type == 'cancel' ? false : true
    show.value = false
}

const formList = ref([{
    label: '车牌号',
    placeholder: '车牌号',
    key: 'licensePlateNumber',
    value: '',
    type: 'text',
    required: true,
    disabled: true,
}, {
    label: '品牌',
    placeholder: '品牌',
    key: 'model',
    value: '',
    type: 'text',
    required: true,
    disabled: true,
}, {
    label: '车型',
    placeholder: '车型',
    key: 'vehicleType',
    value: '',
    type: 'text',
    required: true,
    disabled: true,
}, {
    label: 'VIN码',
    placeholder: 'VIN码',
    key: 'vinCode',
    value: '',
    type: 'text',
    required: true,
    disabled: true,
}])

const canSubmit = computed(() => {
    return formData.value.licensePlateNumber && formData.value.model && formData.value.vehicleType && formData.value.vinCode
})
</script>

<style lang="scss" scoped>
.main {
    .tem-image {
        width: 100%;
        height: 100%;
        position: relative;
        max-height: 500rpx;

        .mc {
            width: 100%;
            height: 100%;
            max-height: 500rpx;
            background: rgba(0, 0, 0, 0.5);
            /* 只让背景透明 */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }

        image {
            width: 100%;
            height: 100%;
            max-height: 500rpx;
        }

        .tip {
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 28rpx;
            color: #000;
            font-weight: 900;
        }
    }

    .form {
        margin-top: 90rpx;
        padding: 0 20rpx;

        .form-item {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            .left {
                display: flex;
                align-items: center;
                width: 15%;
                text-align: right;
                justify-content: flex-end;
                margin-right: 30rpx;

                .req {
                    color: red;
                }

                .label {
                    font-size: 28rpx;
                }
            }

            .input {
                width: 70%;

                input {
                    width: 100%;
                    height: 60rpx;
                    border-radius: 10rpx;
                    border: 1rpx solid #a1a1a1;
                    padding: 0 20rpx;
                    background-color: #cdcbcb;
                }
            }
        }
    }
}

.footer {
    position: fixed;
    bottom: 30rpx;
    left: 0;
    right: 0;
    padding: 0 60rpx;
    font-size: 24rpx;
    color: #666;
    text-align: center;


}

.login-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #cccccc;
    color: white;
    border-radius: 12rpx;
    font-size: 32rpx;
    border: none;

    &.active {
        background-color: #55946d;
    }

    &[disabled] {
        background-color: #cccccc;
    }
}

/* 容器设置相对定位 */
.tem-image {
    position: relative;
    display: inline-block;
}

/* 图片样式 */
.preview-image {
    display: block;
    width: 100%;
    max-height: 500rpx;
}

/* 遮罩层 - 只控制背景透明度 */
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 500rpx;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    /* 图标样式 */
    .tip-icon {
        width: 70rpx !important;
        height: 70rpx !important;
        /* 可选：圆形图标 */
    }

    /* 提示内容容器 */
    .tips {
        display: flex;
        align-items: center;
        z-index: 2;
        /* 确保内容在遮罩层上方 */
    }



    /* 文字样式 */
    .tip-text {
        font-size: 35rpx;
        font-weight: 900;
        color: #fff;
        margin-left: 15rpx;
        text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
        /* 可选：文字阴影增强可读性 */
    }
}
</style>